<template>
	<div id="ShowBlogs">
		<h1 class="text-center">博客总览</h1>
		<div class="input-group  input-group-lg mb-3">
  <input type="text" class="form-control" placeholder="搜索博客内容" v-model="gr_search" >
  <div class="input-group-append">
    <button class="btn  btn-info " type="button">搜索</button>
  </div>
</div>
		<div v-for="blog in filteredBlogs"   class="card text-white bg-info mb-3" > 
		<h4 class="card-header" v-rainbowTitle><router-link  v-bind:to="'blogArticle/' + blog.id" >{{blog.title | to-uppercase}}</router-link></h4>
			<p class="card-body">{{blog.body | snippet}}</p>
		</div>
	</div>
</template>

<script>
export default{
	name:'ShowBlogs',
	data(){
		return{
			gr_blogs_list:[],
			gr_search:""
		}
	},
	created (){
		this.$http.get('http://jsonplaceholder.typicode.com/posts')
		.then(function (data) {
			//console.log(data);
			this.gr_blogs_list=data.body.slice(0,30);
			console.log(this.gr_blogs_list);
		})
	},
	computed:{
		filteredBlogs:function () {
			return this.gr_blogs_list.filter((blog) =>{
				return blog.title.match(this.gr_search);
			})
		}
	},
	filters:{
		/* "to-uppercase": function (value) {
			return value.toUpperCase();
		}, */
		toUppercase (value) {
			return value.toUpperCase();
		}
	},
	directives:{
		'rainbowTitle':{
			bind(el,binding,vnode){
				el.style.color= "#" + Math.random().toString(16).slice(2,8);
			}
		}
	},
}
</script>

<style>
</style>
